<template>
    <div>
        <div class="home-content">
            <div class="leftMenu">
                <el-aside width = "180px">
                    <el-menu
                        router 
                        default-active="activeIndex()"
                        class="el-menu-vertical-demo">
                        
                        <el-menu-item index="/music">
                            <i class="el-icon-headset"></i>
                            <span slot="title">音乐周边</span>
                        </el-menu-item>

                        <el-menu-item index="movie">
                            <i class="el-icon-monitor"></i>
                            <span slot="title">电影周边</span>
                        </el-menu-item>

                        <el-menu-item index="book">
                            <i class="el-icon-reading"></i>
                            <span slot="title">漫画图书</span>
                        </el-menu-item>

                        <el-menu-item index="addNews">
                            <i class="el-icon-edit"></i>
                            <span slot="title">发布商品</span>
                        </el-menu-item>

                    </el-menu>
                </el-aside>
            </div>
            <!-- 主页的主要展示内容 -->
            <div class="rightContent">
                    
                    <router-view></router-view> 
            </div>
        </div> 
    </div>
</template>

<script>

export default {
    name:"home",
    computed:{
        //默认加载后的路由地址
        activeIndex(){
            //截取路由里最后一个'/'后面的字符串----'music'、'movie'、'book'
            const paths = this.$router.path.split('/');
            return paths[paths.length - 1];
        }
    }
}
</script>

<style lang="scss" scoped>

    .home-content{
        padding: 0 10%;
        display: flex;
        flex-direction: row;
        min-height: 700px;
        .leftMenu{
            width: 15%;
            height: 100%;
            position: fixed;
        }
        .rightContent{
            width: 73%;
            height: 100%;
            padding: 0 15%;
        }
    }
</style>